#============================================
#知识点
# HTML简介
# 超文本标记语言
# 如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
# 我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
# <h1>hello big baby~</h1>
# <a href="https: / /www . mz itu. com/">click me! give you some color to see
# see! </a>
# <img
# src="https:/ /dss1. bdstatic. com/ 70cFuXSh_ Q1YnxGkpoWK1HF6hhy/it/u=21590574
# 72 , 1466656787&fm=26&gp=0. jpg" />
#============================================
# HTML就是书写网页的一套标准
# 注释
# <!--单行注释-->
# <!--
# 多行注释1
# 多行注释2
# 多行注释3
# -->
# 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
# <!--导航条开始-->
# 导航条所有的html代码
# <!--导航条结束-->
# <!--左侧菜单栏开始-->
# 左侧菜单栏的HTM1代码
# <!--左侧菜单栏结束-->

# HTML文档结构
# <html>
# <head></head> : head内的标签不是给用户看的而是定义一些配置主要是给浏览器看的
# <body></body> : body内的标签写什么浏览器就渲染什么用户就能看到什么
# </htm1>
# PS:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理
# 并添加很多功能
# 注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表.
# 示代码

# 两种打开HTML文件的方式
# ●找到文件所在的位置右键选择浏览器打开
# ●在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装
# 了对应的浏览器)直接全部使用谷歌浏览器
# ============================================
# 标签的分类1
# <h1></h1>
# <a href="https://www.mzitu.com/"></a>
# <img/>
# 1、双标签
# 2、单标签(自闭和标签)
# ============================================
# head常用的标签
# 在书写HTML代码的时候你只需要写标签名然后tab就能自动补全
# <title>Title</title>网页标题

# <style>
# h1 {
# color: greenyellow;
#         }
# </style> 内部用来书写css代码

# <script>
# alert( 123)
# </script>
# 内部用来书写js代码

# <script src= "myjs.js"></script>还可以引入外部js文件

# <link rel="stylesheet" href= ”mycss.css">引入外部css文件

# <meta name=" keywords" content= ”老男孩教育,老男孩,老男孩培训，Python培训, Linux
# 培训，网络安全培训，Go语言培训,人工智能培训,云计算培训，Linux运维培训, Python自动化运
# 维，Python全栈开发, IT培训“>
# 当你在用浏 览器搜索的时候只要输入了keywords后面指定的
# 关键字那么该网页都有可能被百度搜索出来展示给用户

# <meta name=" keyword" content= ”淘宝，掏宝,网上购物,C2C,在线交易,交易市场，网上交
# 易,交易市场，网上买,网上卖,购物网站,团购，网上贸易,安全购物，电子商务,放心买,供应,买卖
# 信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
# <meta name=" description" content="淘宝网一亚洲较大的网上交易平台，提供各类服
# 饰、美容、家居、数码、话费/点卡充值...数亿优质商品，同时提供担保交易(先收货后付款)等安
# 全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐
# 趣! ">
# 网页的描述性信息
# ============================================
# body内常用标签
# 基本标签
# <h1>我是h1</h1>标题标签 1~6级标题
# <b>加粗</b>
# <i>斜体</i>
# <u>下划线</u>
# <s>删除线</s>
# <p>段落</p>
# <br> 换行
# <hr> 水平分割线
# ============================================
# 标签分类2
# 块级标签：独占一行
# h1-h6,p,div
# 1、块儿级标签可以修改长宽行内标签不可以修改了也不会变化
# 2、块儿级标签内部可以嵌套任意的块儿级标签和行内标签
# 但是p标签虽然是块儿级标签但是它只能嵌套行内标签不能嵌套块儿级标签
# 如果你套了问题也不大因为浏览s器会自动帮你解开(浏览器是直接面向用户的不会轻易的报错哪怕有报错用户也基本感觉不出来)
# 总结:
# 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
# 但是p标签只能嵌套行内标签(HTML书写规范)

# 行内标签：自身文本多大就占多大
# i,u,s,b,span
# 行内标签不能嵌套块儿级标签可以嵌套行内标签
# ============================================
# 特殊符号
# &nbsp ;空格
# &gt 大于号
# &lt 小于号
# &amp “&”
# &yen  “￥”
# &copy 版权 圈c
# &reg    商标 圈r
# ============================================
# 常用标签
# div 块儿级标签
# span 行内标签

# 上述的两个标签是在构造页面初期最常使用的页面的布局一般先用div和span占位之后再去调整
# 样式尤其是div使用非常的频繁
# div你可以把它看成是-块区域也就意味着用div来提前规定所有的区域
# 之后往该区域内部填写内容即可
# 而普通的文本先用span标签占位
# ============================================
# img标签
# #图片标签
# <img src="" alt="" title="" height="800px">
# src                       
# 1.图片的路径可以是本地的也可以是网上的  2.url自动朝该url发送get请求获取数据

# alt="这是我的前女友"        
# 当图片加载不出来的时候给图片的描述性信息

# title="新垣结衣”            
# 当鼠标悬浮到图片上之后自动展示的提示信息

# height=" 800px" width=""   
# 高度和宽度当你只修改一个的时候另外一个参数会等比例缩放如果你修改了两个参数并且没有考虑比例的问题那么图片就会失真
# ============================================
# a标签
#链接标签
# <a href=""></a>
# 当a标签指定的网址从来没有被点击过那么a标签的字体颜色是蓝色
# 如果点击过了就会是紫色(浏览器给你记忆了)

# href
# 1.放url,用户点击就会跳转到该ur1页面

# 2.放其他标签的id值点击即可跳转到对应的标签位置(a标签的锚点功能)
# """eg:点击一个文本标题页面自动跳转到标题对应的内容区域"""

# <a href="" id="d1">顶部</a>工
# <h1 id="d11l">hello world</hl>
# <div style=" height: 1000px; background-color: red"></div>
# <a href="" id="d2">中间</a>
# <div style="height: 1000px; background-color: greenyellow"></ div>

# <a href= "#d1">顶部</a>
# <a href= "#d2">回到中间</a>
# <a href= "#d111">回到hello world</a>

# target
# 默认a标签是在当前页面完成跳转url  self
# 你也可以修改为新建页面跳转url     blank
# ============================================
# 标签具有的两个重要书写
# 1. id值
# 类似于标签的身份证号在同一个html页面上id值不能重复
# 2. class值
# 该值有点类似于面向对象里面的继承-个标签可以继承多个class值

# 标签既可以有默认的书写也可以有自定义的书写
# <p id="d1" class="c1" username= "jason" password="123"></p>
# ============================================
# 列表标签
# ●无序列表(较多)
# <u1>
    # <1i>第一项</1i>
    # <1i>第二项</1i>
    # <1i>第二项</1i>
    # <1i>第二项</1i>
# </ul>
# 虽然u1标签很丑但是在页面布局的时候只要是排版-致的几行数据基本上用的都是u1标签

# ●有序列表(了解)
# <ol type="1" start="5">
# <1i>111</1i>
# <1i>222</1i>
# <1i>333</1i>
# </o1>

# ●标题列表(了解)
# <d1>
# <dt>标题1</dt>
# <dd>内容1 </dd>
# <dt>标题2</dt>
# <dd>内容2</dd>
# <dt>标题3</dt>
# <dd>内容3</dd>
# </d1>
# ============================================
# 表格标签
# <table>
# <thead>表头(字段信息)
#     <tr> - -个tr就表示一行
#         <th>username</th>  加粗文本
#         <td>username</td>  正常文本
#     </tr>
# </ thead>表单(数据信息)


# <tbody>
#     <tr>
#         <td> jason</ td>
#         <td>123</td>
#         <td> read</td>
#     </tr>
# </ tbody>



# <table border="1">加外边宽
# <td colspan="2">egon</td> 水平方向占多行
# <td rowspan="2">DBJ</td>  垂直方向占多行
#原生的表格标签很丑但是后续我们一般都是使用框架封装好的很好看
# ============================================
# 表单标签
# 能够获取前端用户数据(用户输入的、用户选择、用户上传... )基于网络发送给后端服务器
# 写一个注册功能
# <form action="" method="" enctype=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
# action:控制数据提交的后端路径(给哪个服务端提交数据)

# 1.什么都不写默认就是 朝当前页面所在的ur1提交数据
# 2.写全路径:https:/ /www.baidu.com向百度服务端提交
# 3.只写路径后缀action=' /index/ '自动识别出当前服务端的ip和port拼接到前面host : port/ index/
# <label for="dl">
# 第一种直接讲input框写在label内
# username:<input type="text" id="d1">
# </label>
# 第二种通过id链接即可无需嵌套
# <label for=" d2">password:</label>
# <input type= "text" id= "d2 ">
# ps: input不跟label关联也没有问题
# label和input都是行内标签

# method控制请求方式
# 默认是get请求
# 也可以携带数据但是数据是直接破解在ur1后面的不安全并且大小有限制
# url?username= jason&password=123
# 可以修改为post请求
# 携带的数据放在请求体里面的

# enctype
# 控制数据的编码方式
# 默认是ur lencoded只能发送普通的文本不能发送文件
# 如果你要发送文件必须改为formdata
# 发送文件必须要修改的两个参数
# method =' post'
# enctype=' . . . formdata '
# -----------------------------------------------------
# input标签就类似于前端的变形金刚通过type属性变形
# text:普通文本

# password :密文

# date:日期

# submit:用来触发form表单提交数据的动作

# button:就是一个普普通通的按钮本身没有任何的功能但是它是最有用的，学完js之后可以给它自定义各种功能

# reset :重置内容

# file :文件
# <input type="file" multiple>

# hidden:隐藏当前input框
# 钓鱼网站

# radio:单选
# 默认选中要加checked="checked"  
# <input type=" radio" name=" gender" checked>女
# 当标签的属性名和属性值一样的时候可以简写
# <input type="radio" name=”gender" checked>女

# checkbox:多选
# <input type= "checkbox" checked> DBJ

#针对用户输入的标签。如果你加了value那就是默认值
# <label for=" d1 ">username: <input type="text" id="d1" name= "username' value="默认值"></label>

# input下
# disable禁用
# readonly只读
# placeholder 默认值

# #能够触发form表单提交数据的按钮有哪些(-定要记住)
# 1、<input type= " submit" value= "注册">
# 2、<button>点我</button>


# #所有获取用户输入的标签都应该有name属性
# name就类似于字典的key
# 用户的数据就类似于字典的value
# <p>gender:
    # <input type=" radio" name= ”gender">男
    # <input type= " radio" name= "gender">女
    # <input type= ”radio" name= ”gender">其他
# </p>


# select标签默认是单选可以加mutiple参数变多选默认选中selected
# <select name="" id="" multiple>
    # <option value= "" selected>新垣结衣</ option>
    # <option value=""  selected> 斯佳丽</ option>
    # <option value="">明老师</ option>
# </select>

# textarea标签
# 获取大段文本
# textarea name="" id="" cols="30" rows="10"></ textarea>
# ============================================
#框架html
# <!DOCTYPE html>
# <html lang="en">
# <head>
#     <meta charset="UTF-8">
#     <title>Title</title>
# </head>
# <body>

# </body>
# </html>
# ============================================











